<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>💥给你的专属烟花🎆</title>

    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="theme-color" content="#000000">
    <link rel="shortcut icon" type="image/png"
        href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/329180/firework-burst-icon-v2.png">
    <link rel="icon" type="image/png"
        href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/329180/firework-burst-icon-v2.png">
    <link rel="apple-touch-icon-precomposed"
        href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/329180/firework-burst-icon-v2.png">
    <meta name="msapplication-TileColor" content="#000000">
    <meta name="msapplication-TileImage"
        content="https://s3-us-west-2.amazonaws.com/s.cdpn.io/329180/firework-burst-icon-v2.png">
    <link rel="stylesheet" href="./css/style.css">
    <style>
        .canvas-container {
            /* background-image: url("https://up.tt98.com/edpic/c7/ce/c4/c7cec402d263306f4f7b5969ee981549.jpg"); */
            background-size: cover;
            background-position: center;
        }
    </style>
    <script src="./js/jquery.min.js" type="text/javascript"></script>
</head>

<body onclick="clickGift()">

   
   <!-- <audio id="audioDom" src="https://sf6-cdn-tos.douyinstatic.com/obj/ies-music/7170534431801838367.mp3" preload="auto" loop="loop"></audio>--> 
   <audio id="audioDom" src="http://whw20030808.gitee.io/tjq/h.flac" preload="auto" loop="loop"></audio>
   <div id="yhBtn" class="gift">🎁</div>

    <!-- App -->
    <div class="container">
        <div class="stage-container remove">
            <div class="page_two hide">
                <div class="type_words" id="contents"></div>
                <div id="wish_text" />
            </div>
            <div class="canvas-container">
                <canvas id="trails-canvas"></canvas>
                <canvas id="main-canvas"></canvas>
                <canvas id="snow-canvas" style="opacity: 0.5;"></canvas>
            </div>
        </div>
    </div>

    <!-- partial -->
    <script type="text/javascript" src="./js/common.js"></script>
    <script type="text/javascript" src="./js/script.js"></script>
    <script type="text/javascript">
        // 遇到问题微信公众号:程序员晨光 后台留言你的问题，会为你解答
        // 或者直接加微信添加 effortPP 
        function musicPlay(isPlay) {
            var media = document.querySelector('#audioDom');
            if (isPlay && media.paused) {
                media.play();
            }
            if (!isPlay && !media.paused) {
                media.pause();
            }
        }
        function musicInBrowserHandler() {
            setTimeout(function () {
                musicPlay(true)
            }, 0)
        }
        document.body.addEventListener('touchstart', musicInBrowserHandler);
        document.body.addEventListener('click', musicInBrowserHandler);

        // 页面点击就执行
        function clickGift() {
            $('#yhBtn').hide()
            setTimeout(() => {
                start()
                fireworks();
            }, 100) // 这里的5000 是5s指烟花延时时间
            setTimeout(() => {
                function audioAutoPlay() {
                    var audio = document.getElementById('audioDom');
                    audio.play();
                }
                audioAutoPlay();
                wishFun(); // 想要展示祝福语--取消注释
            }, 3000)
            console.log(updateConfig({ autoLaunch: true }));
        }

        function fireworks() {
            $('.page_two').removeClass('hide');
            $('.stage-container').removeClass('remove');
        }
        function start() {
          
            var text = [
              "人生初见，山野见少女婀娜，登高见山河壮阔，仰头见线条腾云",
                "御风见日月悬空，与以后见多了类似画面是截然不同的风景",
                "不一定初见之人是有多美，但是那份感觉，萦绕心扉",
                "千百年才难忘记,于我而言，你是最好且是唯一❤️",
                "新年快乐🎆"
            ]
            var str = text.join('<br><br>')
            var str_ = ''
            var i = 0
            var content = document.getElementById('contents')
            var timer = setInterval(() => {
                if (str_.length < str.length) {
                    str_ += str[i++]
                    content.innerHTML = '<p>' + str_ + '<span class="xx" style="opacity: 1;color: red;">❤</span></p>'                        //打印时加光标
                } else {
                    clearInterval(timer)
                    content.innerHTML = '<p>' + str_ + '</p>'
                }
            }, 100)
        }
    </script>
    <script>
       
        function wishFun() {
            const wish = [
                "2024",
                '新年快乐',
                "Happy New Year",
                "怀揣梦想,勇敢飞翔",
                "龙年吉祥,吉庆有余",
                "辞旧迎新,星光伴你"
            ];
            const text = document.getElementById('wish_text');
            text.style.height = '120px';
            if (text.classList.contains('wish_text')) {
                text.classList.remove("wish_text");
            }
            let i = -1;
            var timer = null;
            clearInterval(timer);
            //开始定时器
            timer = setInterval(() => {
                if (Math.random() * 100 > 2) {
                    if (i < wish.length - 1) {
                        i += 1;
                    } else {
                        i = 0; // 循环播放文字打开这行注释
                    }
                    text.innerText = wish[i];
                    text.classList.add("wish_text");
                }
            }, 3000);
        }
    </script>
    <script type="text/javascript" src="./js/other.js"></script>
</body>

</html>